<template>
	<view>
		<page-head :title="title"></page-head>
			<view class="uni-padding-wrap">
				<view style="background:#FFF; padding:50upx 0;">
					<view class="uni-hello-text uni-center">支付金额</text></view>
					<view class="uni-h1 uni-center uni-common-mt"><text class="rmbLogo">￥</text>0.01</view>
					<view class="uni-hello-text uni-center uni-common-mt">实际应用中可自定义金额</text></view>
				</view>
				<view class="uni-btn-v uni-common-mt">
					<!-- #ifdef MP-WEIXIN -->
					<button type="primary" @tap="weixinPay" :loading="loading">微信支付</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<button v-for="(item,index) in providerList" :key="index" @tap="requestPayment(item,index)" :loading="item.loading">{{item.name}}支付</button>
					<!-- #endif -->
					
					<button type="primary" @tap="testPay" :loading="loading">测试支付</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				title: 'request-payment',
				loading: false,
				providerList: []
			}
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			uni.getProvider({
				service: "payment",
				success: (e) => {
					console.log("payment success", e);
					this.providerList = e.provider.map((value) => {
						switch (value) {
							case 'alipay':
								return {
									name: '支付宝',
									id: value,
									loading: false
								}
							case 'wxpay':
								return {
									name: '微信',
									id: value,
									loading: false
								}
						}
					})
				},
				fail: (e) => {
					console.log("获取登录通道失败：", e);
				}
			});
			// #endif
		},
		methods: {
			weixinPay() {
				console.log("发起支付");
				this.loading = true;
				uni.login({
					success: (e) => {
						console.log("login success", e);
						uni.request({
							url: `https://unidemo.dcloud.net.cn/payment/wx/mp?code=${e.code}&amount=0.01`,
							success: (res) => {
								console.log("pay request success", res);
								if (res.statusCode !== 200) {
									uni.showModal({
										content: "支付失败，请重试！",
										showCancel: false
									});
									return;
								}
								if (res.data.ret === 0) {
									console.log("得到接口prepay_id", res.data.payment);
									let paymentData = res.data.payment;
									uni.requestPayment({
										timeStamp: paymentData.timeStamp,
										nonceStr: paymentData.nonceStr,
										package: paymentData.package,
										signType: 'MD5',
										paySign: paymentData.paySign,
										success: (res) => {
											uni.showToast({
												title: "感谢您的赞助!"
											})
										},
										fail: (res) => {
											uni.showModal({
												content: "支付失败,原因为: " + res.errMsg,
												showCancel: false
											})
										},
										complete: () => {
											this.loading = false;
										}
									})
								} else {
									uni.showModal({
										content: res.data.desc,
										showCancel: false
									})
								}
							},
							fail: (e) => {
								console.log("fail", e);
								this.loading = false;
								uni.showModal({
									content: "支付失败,原因为: " + e.errMsg,
									showCancel: false
								})
							}
						})
					},
					fail: (e) => {
						console.log("fail", e);
						this.loading = false;
						uni.showModal({
							content: "支付失败,原因为: " + e.errMsg,
							showCancel: false
						})
					}
				})
			},
			async requestPayment(e, index) {
				this.providerList[index].loading = true;
				let orderInfo = await this.getOrderInfo(e.id);
				console.log("得到订单信息", orderInfo);
				console.log(JSON.stringify(orderInfo.data))
				if (orderInfo.statusCode !== 200) {
					console.log("获得订单信息失败", orderInfo);
					uni.showModal({
						content: "获得订单信息失败",
						showCancel: false
					})
					return;
				}
				uni.requestPayment({
					provider: e.id,
					orderInfo: orderInfo.data,
					success: (e) => {
						console.log("success", e);
						uni.showToast({
							title: "感谢您的赞助!"
						})
					},
					fail: (e) => {
						console.log("fail", e);
						uni.showModal({
							content: "支付失败,原因为: " + e.errMsg,
							showCancel: false
						})
					},
					complete: () => {
						this.providerList[index].loading = false;
					}
				})
			},
			getOrderInfo(e) {
				let appid = "";
				// #ifdef APP-PLUS
				appid = plus.runtime.appid;
				// #endif
				let url = 'https://demo.dcloud.net.cn/payment/?payid=' + e + '&appid=' + appid + '&total=0.01';
				return new Promise((res) => {
					uni.request({
						url: url,
						success: (result) => {
							res(result);
						},
						fail: (e) => {
							res(e);
						}
					})
				})
			},
			testPay(){
				var that = this;
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: 'service="mobile.securitypay.pay"&partner="2017122001017740"&_input_charset="UTF-8"&out_trade_no="20190115153954"&subject="DCloud项目捐赠"&payment_type="1"&seller_id="2017122001017740"&total_fee="1"&body="DCloud致力于打造HTML5最好的移动开发工具，包括终端的Runtime、云端的服务和IDE，同时提供各项配套的开发者服务。"&it_b_pay="1d"&notify_url="http%3A%2F%2Fdemo.dcloud.net.cn%2Fpayment%2Falipay%2Fnotify.php"&show_url="http%3A%2F%2Fwww.dcloud.io%2Fhelloh5%2F"&sign="XlI%2FTKaTOcPHeXmySdsbLtH%2ByxchHxKJDzGi0jfK0rt3QMucqwHv2MIUF386ClJiHF0XYLmY2X9X6j8UlTEX%2FDXTjwpLsdnzFT%2FUXlW4U77xOb0DP4iBpIHRzJKEpBsF1uw1GS40hmfWXhwIu7iJviU1l0eCNJHerwRFX%2Fnd9COLT0Xydx9vrMCVXW73hucvF%2FSrKyAfIyDUmEijRoe27w%2FVSY7vHlh88%2BVueQUQGzdRZCw46w1kmxPz3xIW6TDEj6Xw7OxRiEZdmlQf6oEd9IiYF91h9kak1jGoIHn7Z8Dh2TzxTkK96WwlfQgFoRV7laGcqivSDlSxTQcPtBSUeQ%3D%3D"&sign_type="RSA"',
							success: (e) => {
								console.log("success", e);
								uni.showToast({
									title: "感谢您的赞助!"
								})
							},
							fail: (e) => {
								console.log("fail", e);
								uni.showModal({
									content: "支付失败,原因为: " + e.errMsg,
									showCancel: false
								})
							},
							complete: () => {
								this.providerList[index].loading = false;
							}
						})
					
			}
		}
	}
</script>

<style>
	.rmbLogo {
		font-size: 40upx;
	}

	button {
		background-color: #007aff;
		color: #ffffff;
	}
</style>
